<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="keywords" content="admin, dashboard, bootstrap, template, flat, modern, theme, responsive, fluid, retina, backend, html5, css, css3">
  <meta name="description" content="">
  <meta name="author" content="ThemeBucket">
  <!--<link rel="shortcut icon" href="#" type="image/png">-->

  <title>CrmDb</title>

  <!--icheck-->
  <link href="js/iCheck/skins/minimal/minimal.css" rel="stylesheet">
  <link href="js/iCheck/skins/square/square.css" rel="stylesheet">
  <link href="js/iCheck/skins/square/red.css" rel="stylesheet">
  <link href="js/iCheck/skins/square/blue.css" rel="stylesheet">

  <!--dashboard calendar-->
  <link href="css/clndr.css" rel="stylesheet">

  <!--Morris Chart CSS -->
  <link rel="stylesheet" href="js/morris-chart/morris.css">

  <!--common-->
  <link href="css/style.css" rel="stylesheet">
  <link href="css/style-responsive.css" rel="stylesheet">
    <!--dynamic table-->
    <link href="js/advanced-datatable/css/demo_page.css" rel="stylesheet" />
    <link href="js/advanced-datatable/css/demo_table.css" rel="stylesheet" />
    <link rel="stylesheet" href="js/data-tables/DT_bootstrap.css" />

    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet">


    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
  <script src="js/respond.min.js"></script>
  <![endif]-->
</head>

<body class="sticky-header">

<section>
    <!-- left side start-->
    <div class="left-side sticky-left-side">

        <!--logo and iconic logo start-->
        <div class="logo">
            <a href="main.html"><img src="images/logo.png" alt=""></a>
        </div>

        <div class="logo-icon text-center">
            <a href="main.html"><img src="images/logo_icon.png" alt=""></a>
        </div>
        <!--logo and iconic logo end-->

        <div class="left-side-inner" style="height: 5000px">

            <!--sidebar nav start-->
            <ul class="nav nav-pills nav-stacked custom-nav">
                <li class="active"><a href="#"><i class="fa fa-home"></i> <span>Tables</span></a></li>
                <li class="menu-list" th:each="table:${tables}">
                    <a>
                    <i class="fa fa-th-list"></i> <span>[[${table.key}]]</span></a>
                    <ul class="sub-menu-list">
                        <li th:each="clu:${table.value}"><a>[[${clu}]]</a></li>
                    </ul>
                </li>
            </ul>
            <!--sidebar nav end-->

        </div>
    </div>
    <!-- left side end-->
    
    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <div class="header-section">

            <!--toggle button start-->
            <a class="toggle-btn"><i class="fa fa-bars"></i></a>
            <!--toggle button end-->


            <!--notification menu start -->
            <div class="menu-right">
                <ul class="notification-menu">
                    <li>
                        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <img src="images/photos/user-avatar.png" alt="" />
                            qctdb
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                            <li><a th:href="@{/loginsql}"><i class="fa fa-sign-out"></i> Log Out</a></li>
                        </ul>
                    </li>

                </ul>
            </div>
            <!--notification menu end -->

        </div>
        <!-- header section end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            查询语句
                            <span class="tools pull-right">
                <a href="javascript:;" class="fa fa-chevron-down"></a>
             </span>
                        </header>
                        <div class="panel-body">
                                <textarea rows="6" id="exsql" name="exsql" class="form-control"></textarea>
                            <div class="form-group pull-left "  style="color:red" >
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" id="noselect"> 非查询类,慎重执行
                                        </label>
                                </div>
                            </div>
                                <button type="button" onclick="ajaxSubmit()" style="margin-top:10px" class="btn btn-primary  pull-right">查询</button>
                        </div>
                    </section>
                </div>
            </div>
           <div class="row">
                <div class="col-sm-12">
                    <section class="panel">
                        <header class="panel-heading">
                            查询结果
                            <span class="tools pull-right">
                <a href="javascript:;" class="fa fa-chevron-down"></a>
             </span>
                        </header>
                        <div class="panel-body">
                            <div class="adv-table" style="height: 600px;overflow:scroll;">
                                <table id="resulttable" class="table  table-hover general-table" >
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th th:each="item:${exresult[0]}">[[${item.key}]]</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="gradeX" th:each="item,itemStat:${exresult}">
                                        <td th:text="${itemStat.index+1}"></td>
                                        <td th:each="td:${item}">[[${td.value}]]</td>
                                    </tr>
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </section>
                </div>
            </div>
        <!--body wrapper end-->

    </div>
    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>

<!--common scripts for all pages-->
<script src="js/scripts.js"></script>

<script type="text/javascript" th:inline="javascript">
    function ajaxSubmit(){
        var exsqlval =  "";
        var text = window.getSelection();
        if (text.toString().length > 1) {
            exsqlval = text.toString();
        }
        else {
            exsqlval = $("#exsql").val();
        }
         var noselect =$("#noselect").prop("checked");

        if (noselect || exsqlval.toLowerCase().indexOf("add") != -1 || exsqlval.toLowerCase().indexOf("update") != -1 || exsqlval.toLowerCase().indexOf("delete") != -1 || exsqlval.toLowerCase().indexOf("exec") != -1) {
            var msg = "您确定要执行吗？";
            if (confirm(msg) == true) {
                ajaxrequest(exsqlval,noselect)
            }
            else
            {
                return;
            }
        }
        else {
            ajaxrequest(exsqlval,noselect)
        }
    }

    function ajaxrequest(exsqlval,noselect){

        $.ajax({
            url: [[@{/getresult}]],
                type: 'post',
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify({exsql : exsqlval,limit : !noselect}),
            async: true,
            success: function(data){
            if(data != null){
                loadDoc(data);
            }
        }
    });
    }


        function loadDoc(data) {
            var $Results = $('#resulttable');//获取页面上id为tableId的table对象

            $("#resulttable").empty(""); //清空table
            var tableStr;//定义一个用来拼表格内容的字符串
            jQuery.support.cors = true;
            //表头
            var $tableHeader = new Array("#");
                for (var key in data.data[0])
                {
                    $tableHeader.push(key);
                }
                    var $tr = null;
                    $tableHeader.forEach(element => {
                        $tr = $tr + "<th>"+ element +"</th>";
                    });
                    $tr= "<tr>"+$tr+"</tr>";
                    $Results.append( $tr);

                    for( var i = 0; i < data.data.length; i++ ) {
                        //动态创建一个tr行标签,并且转换成jQuery对象
                        var $trTemp = $("<tr></tr>");
                        $trTemp.append("<td>"+ (i+1) +"</td>");
                        for (var key in data.data[i])
                        {
                            //往行里面追加 td单元格
                            $trTemp.append("<td>"+ data.data[i][key] +"</td>");
                        }
                        $trTemp.appendTo($Results);
                    }

            };
</script>
</body>
</html>
